<template>
  <div class="game-main">
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"
      :data-source="gameList"
    >
      <template #renderItem="{ item }">
        <a-list-item class="game-item">
          <a-card>
            <template #title>
              <a-tooltip>
                <template #title>{{item.description}}</template>
                <div>{{item.name}}</div>
              </a-tooltip>
            </template>
            <template #extra>
              <!-- <a
                :href="item.path"
                target="_blank"
              >Go</a> -->
              <a-button
                @click="openUrlBlank(item.path)"
                type="link"
              >Go</a-button>
            </template>
            <template #cover>
              <div class="cover-image">
                <a-image
                  :src="item.previewUrl"
                  :alt="item.name"
                  height="300px"
                ></a-image>
              </div>
            </template>
            <template #actions>
              原作者：{{item.author}}
              <a @click="goToMd(item.license)">授权信息</a>
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import {contentSettings} from '@/assets/js/contentSettings.js'

export default {
  components:{
    // StackGame,
    // TheGame
  },
  setup(){
    let data = contentSettings.getData()?.gameSource;
    var gameList = [];
    if(data) gameList = data.children;
    return{
      gameList
    }
  },
  methods:{
    goToMd(path){
      //内置md阅读器打开文件
      let urlPath = ('.' + encodeURIComponent(path));
      const {href} = this.$router.resolve({ path: 'documents', query: { docpath: urlPath, doctype:1 } })
      window.open(href,'_blank');
    },
    openUrlBlank(path){
      window.open(path,'_blank');
    }
  }
}
</script>

<style lang="less" scoped>
.game-main {
  margin: 64px;
}
.game-item {
  /* height: 300px; */
  /* min-height: 300px; */
  .cover-image {
    min-height: 300px;
    max-height: 300px;
    text-align: center;
  }
}
</style>